<template>
  <div class="content">
    <el-card>
      <!-- 添加、修改医院页面 form  -->
      <el-form
        class="Form_with"
        :model="formData"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
      >
        <el-form-item label="医院名称" prop="hosname">
          <el-input v-model="formData.hosname"></el-input>
        </el-form-item>
        <el-form-item label="医院编号" prop="hoscode">
          <el-input v-model="formData.hoscode"></el-input>
        </el-form-item>
        <el-form-item label="api基础路径" prop="apiUrl">
          <el-input v-model="formData.apiUrl"></el-input>
        </el-form-item>
        <el-form-item label="联系人姓名" prop="contactsName">
          <el-input v-model="formData.contactsName"></el-input>
        </el-form-item>
        <el-form-item label="联系人电话" prop="contactsPhone">
          <el-input v-model="formData.contactsPhone"></el-input>
        </el-form-item>
        <!--按钮 -->
        <el-form-item>
          <el-button type="primary" @click="addhospital"> 保存 </el-button>
          <el-button @click="return_hospital"> 返回 </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { reqAddhospital, reqHospitalSetById } from "@/api/hospitalSet";
export default {
  data() {
    return {
      id: "",
      formData: {
        apiUrl: "",
        contactsName: "",
        contactsPhone: "",
        hoscode: "",
        hosname: "",
      },
      rules: {
        hosname: [
          { required: true, message: "请输入医院名称", trigger: "blur" },
        ],
        hoscode: [
          { required: true, message: "请输入医院编号", trigger: "blur" },
        ],
        apiUrl: [
          { required: true, message: "请输入api基础路径", trigger: "blur" },
        ],
        contactsName: [
          { required: true, message: "请输入联系人姓名", trigger: "blur" },
        ],
        contactsPhone: [
          {
            required: true,
            message: "请输入11位联系人电话",
            trigger: "blur",
            max: 11,
            min: 11,
          },
        ],
      },

      // 定义一个值用来 判断id 是否存在，改变type 的值使message 拼接上展示 是“添加”还是“修改”
      type: "添加",
    };
  },
  mounted() {
    const id = this.$route.params.id;
    this.id = id;
    // if 判读是否存在 id ,有id就是修改，没id 则是添加
    if (id) {
      this.type = "修改";
      this.getHospitalSetById();
    } else {
      this.type = "添加";
    }
  },
  methods: {
    //  ModifyHospital 添加页面的返回按钮
    return_hospital() {
      this.$router.push("/hospital/hospitalset");
    },

    // 点击表单"保存"按钮提交添加医院数据
    async addhospital() {
      try {
        await this.$refs.ruleForm.validate();
        try {
          await reqAddhospital(this.formData);
          this.$message.success(this.type + "成功");
          this.$router.push("/hospital/hospitalset");
        } catch (e) {
          this.$message.error(this.type + "失败");
        }
      } catch (e) {}
    },
    //修改根据id 获取医院列表
    async getHospitalSetById() {
      try {
        const res = await reqHospitalSetById(this.id);
        // 获取data 将获取到的值，传给formData,因为是双向绑定，则会展示在输入框中，便于修改
        this.formData = res.data;
        // console.log(res);
      } catch (error) {}
    },
  },
};
</script>

<style lang="scss" scoped>
.Form_with {
  margin-left: 100px;
}
</style>
